import Taro, {Component, Config} from "@tarojs/taro";
import {View, Text, Image} from "@tarojs/components";
import {AtActivityIndicator, AtButton, AtIcon} from "taro-ui";
import moment from "moment";
import "./index.scss";

interface Basic { //电影基本信息
  image: string, //封面图
  titleCn: string,  //名字
  titleEn: string, //英文名字
  runTime: string,  //时常
  type: { number: string },  //类型
  releaseDate: any,  //上映时间
  rating: string,  //评分
  release: Object,  //上映时间地点
  commonSpecial: string, //电影简介
  content: string,  //内容简介
  personCount: number,  //演员人数
  director: Object,  //导演
  actorList: Array<any>,  //演员列表
  imageCount: number,  //图片数量
  images: Array<any>,  //展示的图片
  video: string, //预告视频
  videos: Array<any>,  //预告视屏列表
}

//精选影评
interface Selected {
  title:string,  //标题
  content:string,  //内容
  headurl:string,  //评论人头像
  nickname:string,  //评论人昵称
  rating:number,  //评分
  modifyTime:number,  //评论时间
}
//票房
interface boxOffice {
  ranking:number,  //累计排名
  todayBoxDes:string,  //今日实时
  todayBoxDesUnit:string,
  totalBoxDes:string,  //累计票房
  totalBoxUnit:string,
}

export default class Details extends Component {
  config: Config = {
    navigationBarTitleText: '电影详情页面',
  }
  state = {
    LocationId: '',
    MovieId: '',
    result: '', //其他详情
    basicResult:'', //电影详情
    SelectedReviews:'', //精选影评
    SelectedReviewsCount:'',  //精选影评数量
  }
  _showTime = (val: string) => {
    const time = (new Date(val)).getTime();  //格式化时间戳
    console.log(moment(val).format('X'));
    console.log(time);
    return moment(time).format('ll');
  }

  componentDidMount(): void {
    let movieId = "";
    let locationId = "";
    const item = Taro.getCurrentPages();
    item.map((val) => {
      console.log(val);
      const options = val.options;
      if (options) {
        if (val.route === "pages/moveDetails/index") {
          movieId = options.movieId;
          locationId = options.locationId
        }
      }
    })
    this.setState({
      LocationId: locationId,
      MovieId: movieId,
    })
    //评分 其他内容
    Taro.cloud.callFunction({
      name: 'https',
      data: {
        url: `https://ticket-api-m.mtime.cn/movie/detail.api?t=20195251056662479&movieId=${movieId}&locationId=${locationId}`
      }
    }).then(res => {
      let result = JSON.parse(res.result);
      console.log(result, '详情内容');
      this.setState({
        result: result.data.boxOffice,
      })
    })
    //影片基本内容
    Taro.cloud.callFunction({
      name: 'https',
      data: {
        url: `http://m.mtime.cn/Service/callback.mi/movie/Detail.api?movieId=${movieId}&locationId=${locationId}`
      }
    }).then(res => {
      let result = JSON.parse(res.result);
      console.log(result, '基本信息');
      this.setState({
        basicResult: result,
      })
    })
    //精选短评
    Taro.cloud.callFunction({
      name:'https',
      data:{
        url:`http://m.mtime.cn/Service/callback.mi/Movie/HotLongComments.api?movieId=${movieId}&pageIndex=1`
      }
    }).then(res=>{
      let result = JSON.parse(res.result);
      console.log(result,'精选影评');
      this.setState({
        SelectedReviews:result.comments,
        SelectedReviewsCount:result.totalCount,
      })
    })
  }

  getTime = (val: string) => {
    let reg = new RegExp('-', 'g');
    let regValue = val.replace(reg, ',');
    let value = regValue.split(',');
    return value[0] + '年' + value[1] + '月' + value[2] + '日';
  }
  //获取预告列表
  getVideoList = ()=>{
    Taro.navigateTo({
      url:'/pages/moveDetails/VideoList/index?MovieId='+this.state.MovieId,
    })
  }
  render() {
    let type: JSX.Element[] | JSX.Element;
    let showTime: JSX.Element[] | JSX.Element;
    let mainactor: JSX.Element[] | JSX.Element;
    let imageList: JSX.Element[] | JSX.Element;
    let SelectedReViewEle:JSX.Element[] | JSX.Element;
    const basicResult: Basic = this.state.basicResult;
    let SelectedOff:boxOffice = this.state.result;  //票房
    let SelectedReviews = this.state.SelectedReviews  //精选评论
    let lengthBas: number;
    let _this = this;
    if (basicResult) {
      lengthBas = Number(basicResult.type.length) - 1;  //长度
      //底部的类型-时长-评分
      type = basicResult.type.map((item, index) => {
        return (
          <Text key={index}>{item} {
            index == lengthBas ? '' : '/'
          }</Text>
        )
      })
      // basicResult.release.date
      showTime = (
        <Text>{_this.getTime(basicResult.release.date)}</Text>
      )
      mainactor = basicResult.actorList.map((item, index) => {
        return (
          <View key={index} style={{paddingRight:'20px'}}>
            <Text className='directorText'>主要演员</Text>
            <Image mode='aspectFill' className='mainactorImage' src={item.actorImg}></Image>
            <Text className='directorName'>{item.actor}</Text>
            <Text className='directorName'>{item.actorEn.length>5?(item.actorEn).substring(0,10)+"...":item.actorEn}</Text>
          </View>
        )
      })
      imageList = basicResult.images.map((item,index)=>{
        return (
          <Image mode='aspectFill' className='BottomImage' src={item} key={index}></Image>
        )
      })
      SelectedReViewEle = SelectedReviews.map((item:Selected,index)=>{
          return (
            <View key={index} className='AvatarTop'>
              <Text className='actorsNumber'>{item.title}</Text>
              <View style='clear:both'></View>
              <Text className='AvatarContent'>{item.content}</Text>
              <View className='RightAvatar'>
                <Image className='AvatarImage' src={item.headurl}></Image>
                <View className='AvatarView'>
                  <Text className='AvatarHeader'>{item.nickname}</Text>
                  <Text className='AvatarTime'>{item.modifyTime}</Text>
                  <Text className='AvatarGrade'>评分: {item.rating}</Text>
                </View>
                <View style='clear:both'></View>
              </View>
            </View>
          )
      })
    }
    return (
      <View className='container'>
        {
          basicResult ?
            <View>
              <View className='at-row'>
                <View onClick={()=>this.getVideoList()} className='at-col-4 AtIconView'>
                  <Image mode='aspectFit' className='Image' src={basicResult.image}></Image>
                  <View className='AtIconStyle'>
                    <AtIcon value='play' size='35' color='white'></AtIcon>
                  </View>
                </View>
                <View className='at-col-8'>
                  <Text className='titleCn'>{basicResult.titleCn}</Text>
                  <Text className='titleEn'>{basicResult.titleEn}</Text>
                  <Text className='bottomCommom'>{basicResult.runTime}</Text>
                  <Text className='bottomType'>{basicResult.rating}</Text>
                  <Text className='bottomType'>{type}</Text>
                  <Text className='bottomType'>{showTime}{basicResult.release.location}上映</Text>
                </View>
                {/*{basicResult}*/}
              </View>
              <Text className='commonSpecial'>{basicResult.commonSpecial}</Text>
                {
                  SelectedOff.ranking!=0?
                    <View className='at-row SelectedOffView'>
                      <View className='at-col'>
                        <Text className='SelectedOffTopText'>{SelectedOff.todayBoxDes}</Text>
                        <Text className='SelectedOffBottomText'>{SelectedOff.todayBoxDesUnit}</Text>
                      </View>
                      <View className='at-col'>
                        <Text className='SelectedOffTopText'>{SelectedOff.totalBoxDes}</Text>
                        <Text className='SelectedOffBottomText'>{SelectedOff.totalBoxUnit}</Text>
                      </View>
                      <View className='at-col'>
                        <Text className='SelectedOffTopText'>{SelectedOff.ranking}</Text>
                        <Text className='SelectedOffBottomText'>累计排名</Text>
                      </View>
                    </View>
                    :''
                }
              <AtButton className='AtButtonS' circle={true} type='primary' size='normal'>查影讯/购票</AtButton>
              <View className='TextContentView'>
                <Text className='TextContent'>
                  {basicResult.content}
                </Text>
              </View>
              <View className='actorsView'>
                <Text className='actorsNumber'>{basicResult.personCount}位演职员</Text>
                <View style={{float: 'right'}}>
                  <AtIcon value='chevron-right' size={25}></AtIcon>
                </View>
                <View style={{clear: 'both'}}></View>
                <View className='at-row'>
                  <View className='at-col at-col-4 directorView'>
                    <Text className='directorText'>导演</Text>
                    <Image className='directorImage' src={basicResult.director.directorImg}></Image>
                    <Text className='directorName'>{basicResult.director.directorName}</Text>
                    <Text className='directorName'>{ basicResult.director.directorNameEn.length>5?(basicResult.director.directorNameEn).substring(0,10)+"...":basicResult.director.directorNameEn}</Text>
                  </View>
                  <View className='at-col at-col-8 mainactor'>
                    {mainactor}
                  </View>
                </View>
              </View>
              <View className='actorsView'>
                <Text className='actorsNumber'>{basicResult.personCount}张图片</Text>
                <View style={{float: 'right'}}>
                  <AtIcon value='chevron-right' size={25}></AtIcon>
                </View>
                <View style={{clear: 'both'}}></View>
                <View className='at-row'>
                  <View className='at-col mainactor'>
                    {imageList}
                  </View>
                </View>
              </View>
              <View className='actorsView'>
                <Text className='actorsNumber'>精选影评 ({this.state.SelectedReviewsCount})</Text>
                <View style={{float: 'right'}}>
                  <AtIcon value='chevron-right' size={25}></AtIcon>
                </View>
                <View style={{clear: 'both'}}></View>
                {SelectedReViewEle}
              </View>
            </View>
            :
            <AtActivityIndicator mode='center' content='加载中...'></AtActivityIndicator>
        }
      </View>
    )
  }
}
